<template>
  <div class="flex flex-col w-full p-1 mb-[20px]">
    <div class="bg-secondary aspect-video">
      <UseImage
        :src="poster"
        width="200"
        height="600"
        :alt="episode.name"
        class="size-full object-cover"
      >
        <template #loading>
          <div class="flex items-center justify-center size-full">
            <RiLoaderLine class="size-8 animate-spin fill-primary" />
          </div>
        </template>

        <template #error>
          <div class="flex items-center justify-center size-full">
            <RiFileImageLine class="size-9" />
          </div>
        </template>
      </UseImage>
    </div>

    <h2 class="mb-[10px] text-base mt-[15px]">
      <strong class="text-primary"
        >E{{ numberWithDoubleDigits(episode.episode_number) }}</strong
      >
      {{ episode.name }}
    </h2>

    <div v-if="episode.overview" class="flex-[1_0_auto] mb-[10px] text-[13px] text-[#fafafa]">
      {{ truncate(episode.overview, 300) }}
    </div>

    <div v-if="episode.air_date" class="text-xs text-grey xl:text-sm">
      {{ fullDate(episode.air_date) }}
    </div>
  </div>
</template>
<script setup>
import { truncate, fullDate, numberWithDoubleDigits } from "@/lib/filter";
import { RiFileImageLine, RiLoaderLine } from "vue-icons-plus/ri";
import { UseImage } from "@vueuse/components";
import { apiImgUrl } from "@/api";
import { computed } from "vue";


const { episode } = defineProps({
  episode: {
    type: Object,
    required: true,
  }, 
})

const poster = computed(() => {
  if (episode.still_path) {
    return `${apiImgUrl}/w400${episode.still_path}`;
  } else {
    return null;
  }
});
</script>
